<template>
  <div class="procurement_box">
    <btnGroup title="采购总概" :btn-list="btnList" :current-btn-active="btnActive" @change="selectChange" />
    <div class="graph_data">
      <div class="graph-chart">
        <lineChart id="procurement_echart" heights="360px" :x-axis-data="xAxisData" :legend-data="legendData" :series-data="seriesData" />
      </div>
      <div v-if="viewData" class="data-list">
        <li>
          <span class="left_span">采购单数量</span>
          <span class="count-number right_span">{{ viewData.orderCount }}</span>
        </li>
        <li>
          <span class="left_span">采购总金额/元</span>
          <span class="count-number right_span">{{ viewData.orderSales }}</span>
        </li>
        <li>
          <span class="left_span">已结算总金额/元</span>
          <span class="count-number right_span">{{ viewData.orderPayment }}</span>
        </li>
        <li>
          <span class="left_span">待结算总金额/元</span>
          <span class="count-number right_span">{{ viewData.waitPayment }}</span>
        </li>
        <li>
          <span class="left_span">采购总量/吨</span>
          <span class="count-number right_span">{{ viewData.orderWeight }}</span>
        </li>
        <li>
          <span class="left_span">供应商数量</span>
          <span class="count-number right_span">{{ viewData.suplierCount }}</span>
        </li>
        <li>
          <span class="left_span">纸厂数量</span>
          <span class="count-number right_span">{{ viewData.factoryCount }}</span>
        </li>
        <li>
          <span class="left_span">业务员数量</span>
          <span class="count-number right_span">{{ viewData.salesmanCount }}</span>
        </li>
      </div>
    </div>
  </div>
</template>

<script>
import btnGroup from '@/components/TopBtnGroup'
import lineChart from '@/components/Echart/line_chart'
import { purchaseBiDay, purchaseBiYear, purchaseBiMonth, purchaseViewData } from '@/api/data'
import formDate from '@/utils/formatDate'
export default {
  name: 'Procurement',
  components: { btnGroup, lineChart },
  data() {
    return {
      btnActive: 'month',
      btnList: [
        // { 'text': '当日', 'val': 'day' },
        { 'text': '本月', 'val': 'month' },
        { 'text': '本周', 'val': 'week' },
        { 'text': '季度', 'val': 'quarter' },
        { 'text': '本年', 'val': 'years' },
        { 'text': '全部', 'val': 'all' }
      ],
      xAxisData: [],
      legendData: { data: ['采购单', '采购金额', '采购总量'], selected: { '采购单': false, '采购金额': true, '采购总量': false }},
      seriesData: [
        {
          name: '采购单',
          type: 'line',
          stack: '总量',
          data: []
        },
        {
          name: '采购金额',
          type: 'line',
          stack: '总量',
          data: []
        },
        {
          name: '采购总量',
          type: 'line',
          stack: '总量',
          data: []
        }
      ],
      viewData: null
    }
  },
  created() {
    // 默认按本月
    const start = formDate.getMonthStartDate()
    const end = formDate.getMonthEndDate()
    this.purchaseBiDay(start, end, 'day_month')
    this.init(2)
  },
  methods: {
    async purchaseBiYear() { // 年报 获取全部
      const param = { pageIndex: 0,
        pageSize: 100,
        queryList: [
          { 'key': 'o.createDate', 'value': '1970-01-01 09:00:00', 'oper': '>=', 'join': 'and' },
          { 'key': 'o.createDate', 'value': new Date(), 'oper': '<=', 'join': 'and' }
        ],
        sortFields: 'createYear_d'
      }
      const result = await purchaseBiYear(param)
      if (result.code === 200) this.dealData(result.data, 'years')
      else this.$message.error('图表数据请求错误')
    },
    async purchaseBiDay(start, end, type) { // 日报
      console.log('purchaseBiDay api type = ' + type)
      const param = { pageIndex: 0,
        pageSize: 100,
        queryList: [
          { 'key': 'o.createDate', 'value': start, 'oper': '>=', 'join': 'and' },
          { 'key': 'o.createDate', 'value': end, 'oper': '<=', 'join': 'and' }
        ],
        sortFields: 'createDate_d'
      }
      const result = await purchaseBiDay(param)
      if (result.code === 200) this.dealData(result.data, type)
      else this.$message.error('图表数据请求错误')
    },
    async purchaseBiMonth(start, end) { // 月报
      const param = { pageIndex: 0,
        pageSize: 100,
        queryList: [
          { 'key': 'o.createDate', 'value': start, 'oper': '>=', 'join': 'and' },
          { 'key': 'o.createDate', 'value': end, 'oper': '<=', 'join': 'and' }
        ],
        sortFields: 'createMonth_d'
      }
      const result = await purchaseBiMonth(param)
      if (result.code === 200) this.dealData(result.data, 'month')
      else this.$message.error('图表数据请求错误')
    },
    // 数据处理
    dealData(data, dateType) {
      this.xAxisData = []
      this.seriesData[0].data = []
      this.seriesData[1].data = []
      this.seriesData[2].data = []
      const arr = data.records
      arr.forEach(element => {
        if (dateType === 'day_week') {
          const str = element.createDate
          this.xAxisData.unshift(formDate.getAssignDateWeek(str))
        } else if (dateType === 'day_month') {
          const str = element.createDate
          this.xAxisData.unshift(formDate.getDateTimeDate(str))
        } else if (dateType === 'month') {
          const str = element.createDate
          if (str) {
            this.xAxisData.unshift(formDate.getYearMonth(str))
          } else {
            this.xAxisData.unshift(element.createMonth)
          }
          // this.xAxisData.unshift(element.createMonth)
        } else if (dateType === 'years') {
          this.xAxisData.unshift(element.createYear)
        }
        this.seriesData[0].data.unshift(element.orderCount)
        this.seriesData[1].data.unshift(element.orderSales)
        this.seriesData[2].data.unshift(element.orderWeight)
        // this.seriesData[3].data.unshift(element.logisticsTotalWeight)
      })
      console.log(this.seriesData)
    },
    formatData(type) {
      if (!type || type === -1) { // 全部
        var myDate = new Date()
        return { start: '1970-1-1', end: myDate.format('yyyy-MM-dd') }
      } else if (type === 0) {
        const start = (formDate.nowYear) + '-' + (formDate.nowMonth + 1) + '-' + formDate.nowDay + ' ' + '00:00:00'
        const end = (formDate.nowYear) + '-' + (formDate.nowMonth + 1) + '-' + formDate.nowDay + ' ' + '23:59:59'
        return { start: start, end: end }
      } else if (type === 1) { // 本周
        const start = formDate.getWeekStartDate()
        const end = formDate.getWeekEndDate()
        return { start: start, end: end }
      } else if (type === 2) { // 本月
        const start = formDate.getMonthStartDate()
        const end = formDate.getMonthEndDate()
        return { start: start, end: end }
      } else if (type === 3) { // 季度
        const start = formDate.getQuarterStartDate()
        const end = formDate.getQuarterEndDate()
        return { start: start, end: end }
      } else if (type === 4) { // 本年
        const start = formDate.getYearStartDate()
        const end = formDate.getYearEndDate()
        return { start: start, end: end }
      }
    },
    async init(type) {
      const date = this.formatData(type)
      console.log(date)
      var result = await purchaseViewData(date)
      if (result.code === 200) this.viewData = result.data
    },
    selectChange(val) {
      const WeekStartDate = formDate.getWeekStartDate()
      const WeekEndDate = formDate.getWeekEndDate()
      const monthStartDate = formDate.getMonthStartDate()
      const monthEndDate = formDate.getMonthEndDate()
      const quarterStartDate = formDate.getQuarterStartDate()
      const quarterEndDate = formDate.getQuarterEndDate()
      const yearsStartDate = formDate.getYearStartDate()
      const yearsEndDate = formDate.getYearEndDate()
      switch (val) {
        case 'all': // 全部
          this.purchaseBiYear()
          this.init(-1)
          break
        case 'day': // 本日
          this.init(0)
          break
        case 'week': // 本周
          this.purchaseBiDay(WeekStartDate, WeekEndDate, 'day_week')
          this.init(1)
          break
        case 'month': // 本月
          this.purchaseBiDay(monthStartDate, monthEndDate, 'day_month')
          this.init(2)
          break
        case 'quarter': // 本季度
          this.purchaseBiMonth(quarterStartDate, quarterEndDate)
          this.init(3)
          break
        case 'years': // 本年
          this.purchaseBiMonth(yearsStartDate, yearsEndDate)
          this.init(4)
          break
        default:
          break
      }
    }
  }
}
</script>

<style scoped lang="scss" >
.procurement_box{
  padding: 20px;
}
.graph_data{
  display: flex;
  margin-top: 10px;
}
.graph-chart{
  width: 70%;
}
.data-list{
  width: 28%;
  margin-left: 1%;
  margin-top: 10px;
  height: 340px;
  border: 1px solid #eee;
  font-size: 14px;
  color: #151B25FF;
  li{
   list-style-type:none;
   padding: 12px 20px;
   border-bottom: 1px solid #eee;
   display: flex;
   justify-content: space-around;
   span{
     flex: 1;
     padding: 0 20px;
   }
  }

  .left_span{text-align: right;}
  .right_span{text-align: left;}

   li:nth-of-type(odd){ background:#f1f1f1;}
   li:nth-of-type(even){ }
   li:last-child{border-bottom: none;}
   .count-number{font-weight: bold;}
}

</style>
